import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/app/app_state.dart';
import 'package:flutter_app/compents/icon_text_widget.dart';
import 'package:flutter_app/controller/person/user_info_controller.dart';
import 'package:flutter_app/defualt/Global.dart';
import 'package:flutter_app/http/request_api.dart';
import 'package:flutter_app/route/routes_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class PersonPage extends StatefulWidget {
  @override
  _PersonPageState createState() => _PersonPageState();
}

//Flutter AutomaticKeepAliveClientMixin 的作用
//切换tab后保留tab的状态，避免initState方法重复调用
//重写这个方法
// @override
// TODO: implement wantKeepAlive
// bool get wantKeepAlive => true;
class _PersonPageState extends State<PersonPage> with AutomaticKeepAliveClientMixin {
  double mainAixSpacing = 5.w;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: CustomScrollView(
        //CustomScrollView 滑动组件
        physics: NeverScrollableScrollPhysics(),
        //NeverScrollableScrollPhysics 禁止滑动
        slivers: [
          _buildTitleUI(),
          _buildTopUIPage(),
        ],
      ),
    );
  }

  Widget _buildTitleUI() {
    //顶部标题栏
    return SliverAppBar(
      //SliverAppBar 页面头部展开 合并效果
      brightness: Brightness.dark, //brightness 背景颜色
      actions: [
        IconButton(
          icon: Icon(Icons.settings),
          onPressed: () {
            Get.toNamed(RoutesConfig.SETTING_PAGE);
          },
        )
      ],
      flexibleSpace: FlexibleSpaceBar(
        //FlexibleSpaceBar-可折叠的应用栏
        background: Stack(
          //stack Stack和Container，Column，Row基本上一样，都是一种存放其他Widget的容器，不同点在于Row、Column、Stash中存放的是一组Widget；Container每次只能放一个WIdget
          //Stack里面可以存放各种Widget，不过有一个缺点就是所有的子widget都是重叠放在一起的
          //为了能够使stack里面的子widget分开展示，需要借助于Positioned这个widget来辅助，可以通过Positioned来设置上下左右，宽高等属性
          children: [
            CachedNetworkImage(
              //Image 本地&网络图片、圆形图片、CachedNetworkImage Widget 和 FadeInImage Widget
              cacheKey: Random().nextInt(100).toString(),
              imageUrl: RequestApi.PERSON_PAGE_TOP_BACKGROUND_API,
              fit: BoxFit.cover,
              //BoxFit:fill:充满父容器,.contain:尽可能大，保持图片分辨率,cover:充满容器，可能会被截断,.none:图片居中显示，不改变分大小，可能会被截断,fitWidth:图片填满宽度，高度可能会被截断,fitHeight:图片填满高度，宽度可能会被截断,scaleDown:图片可以完整显示，但是可能不能填充满
              height: double.infinity,
              width: double.infinity,
              placeholder: (context, url) {
                return Image.asset(
                  "assets/icon/ic_default_avatar.png",
                  fit: BoxFit.cover,
                  width: double.infinity,
                );
              },
            ),
            Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: _buildPersonTop())
          ],
        )
      ),
      expandedHeight: 200.h,
    );
  }

  ///创建个人头像信息
  Widget _buildPersonTop() {
    return Container(
      height: 80.h,
      padding: const EdgeInsets.only(left: 10.0, right: 10.0),
      //BoxDecoration 一个背景装饰对象，相当于Android中的shape.xml，定制各种各样的背景（边框、圆角、阴影、形状、渐变、背景图像）
      decoration: BoxDecoration(
          color: Theme.of(context).scaffoldBackgroundColor,
          borderRadius: BorderRadius.only(
            //BorderRadius设置四周圆角角度啥的
            topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0),
          )),
      child: Row(
        //MainAxisAlignment是水平的，默认起始位置在左边，排列方向为从左至右，此时可以通过textDirection来改变MainAxisAlignment的起始位置和排列方向
        // CrossAxisAlignment是垂直的，默认起始位置在中间，排列方向为从上至下，此时可以通过verticalDirection来改变CrossAxisAlignment的起始位置及排列方向
        //https://blog.csdn.net/yuzhiqiang_1993/article/details/86496145
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: 70.w,
            height: 70.w,
            //加一个头像边框
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(100),
              border:
                  Border.all(width: 2.5, color: Colors.grey.withOpacity(0.5)),
              color: Colors.grey[200].withOpacity(0.5),),
            child: Obx(() {
              //OBX数据嵌套重复更新
              return CircleAvatar(
                  //CircleAvatar组件，圆形和圆角图片
                  backgroundColor: Colors.white,
                  backgroundImage: Get.find<AppState>().loginState.value == LoginState.LOGIN ?
                          ///图片加载本地图片 AssetImage  NetworkImage加载网络图片
                          NetworkImage(RequestApi.PERSON_PAGE_AVATAR)
                          : AssetImage("assets/icon/ic_default_avatar.png"));
            })
          ),
          SizedBox(width: 10.w),
          //SizedBox: 两种用法：一是可用来设置两个widget之间的间距，二是可以用来限制子组件的大小。
          //个人信息
          _personInfoText(),
          //消息通知
          _personMessage()
        ],
      ),
    );
  }

  ///个人信息
  Widget _personInfoText() {
    return Obx(() {
      if (Get.find<AppState>().loginState.value == LoginState.LOGIN) {
        return Column(
          //Column相当于android Linealayout
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //用户名
            Text(
              Global.userProfile.username,
              style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.black),
            ),
            SizedBox(
              height: 5.h,
            ),
            GetX<UserInfoController>(
              init: Get.put<UserInfoController>(UserInfoController()),
              initState: (_) {
                Get.find<UserInfoController>().getUserCoin();
                Get.find<UserInfoController>().getMessage();
              },
              builder: (controller) {
                return Row(
                  children: [
                    //等级
                    // Container可以根据属性的设置来展现不同的布局大小和样式,还可以容纳其他Widget.
                    // Container只所以可以是容器,因为它可以容纳其它的widget.
                    Container(
                      padding:EdgeInsets.symmetric(horizontal: 10, vertical: 1),
                          // fromLTRB(double left, double top, double right, double
                          // bottom)：分别指定四个方向的填充。
                          // all(double value) : 所有方向均使用相同数值的填充。
                          // only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
                          // symmetric({vertical, horizontal})：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
                          // https://blog.csdn.net/u013095264/article/details/101291219
                      child: Text(
                        "lv ${controller.coin.level}",
                        style: TextStyle(fontSize: 13, color: Colors.white),
                      ),
                      decoration: BoxDecoration(
                        color: Colors.greenAccent[200].withOpacity(0.5),
                        borderRadius: BorderRadius.circular(5),
                      ),
                    ),
                    SizedBox(
                      width: 5.w,
                    ),
                    //积分
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 5, vertical: 1),
                      child: Text(
                        "积分 ${controller.coin.coinCount}",
                        style: TextStyle(fontSize: 13, color: Colors.white),
                      ),
                      decoration: BoxDecoration(
                          color: Colors.grey,
                          borderRadius: BorderRadius.circular(5)),
                    )
                  ],
                );
              },
            )
          ],
        );
      }
      return Expanded(
        //Expanded常用于Row, Column, Flex的子元素中；在使用Expanded子Widget的时候，能够填充满剩余空间。
        //有点类似于Linealayout 权重
        //InkWell组件在用户点击时出现“水波纹”效果，InkWell简单用法：
        child: InkWell(
          child: Text(
            "立即登录",
            style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.bold,
                color: Colors.black87),
          ),
          onTap: () {
            Get.toNamed(RoutesConfig.LOGIN_PAGE);
          },
        ),
      );
    });
  }

  ///消息
  Widget _personMessage() {
    return Obx(() {
      if (Get.find<AppState>().loginState.value == LoginState.LOGIN) {
        return Expanded(
          child: Stack(
            // alignment 布局定位
            alignment: AlignmentDirectional.centerEnd,
            children: [
              IconButton(
                  icon: Icon(
                    Icons.message_outlined,
                    size: 25.w,
                  ),
                  onPressed: () {
                    //TODO:显示消息列表
                    Get.toNamed(RoutesConfig.GIRL_PAGE);
                  }),
              Positioned(
                child: Container(
                  width: 15.w,
                  alignment: Alignment.center,
                  child: Get.find<UserInfoController>().messageCount > 0 ? CircleAvatar(
                    backgroundColor: Colors.red,
                    child: Text(
                        Get.find<UserInfoController>().messageCount.toString()
                    ),
                  ) : null
                ),
                top: -5.0,
                right: 5,
              )
            ],
          ),
        );
      }
      return Container();
    });
  }

  ///收藏,积分,分享,排行榜,历史
  Widget _buildTopUIPage() {
    Color iconTextWidgetColor = Theme.of(context).textTheme.headline3.color;
    return SliverToBoxAdapter(
      child: Container(
        padding: EdgeInsets.all(10.w),
        margin: EdgeInsets.all(10.w),
        decoration: BoxDecoration(
          //背景
            color: Theme.of(context).scaffoldBackgroundColor,
            borderRadius: BorderRadius.circular(
                5.r)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconTextWidget.builder(Icons.collections_outlined,"收藏",mainAixSpacing: 10.w,labelColor: iconTextWidgetColor,onTap: (){
              Get.toNamed(RoutesConfig.PERSON_COLLECTION_PAGE);
            },),
            IconTextWidget.builder(Icons.share, "分享",mainAixSpacing: 10.w,labelColor: iconTextWidgetColor,onTap:(){
              Get.toNamed(RoutesConfig.PERSON_COLLECTION_PAGE);
            },),
            IconTextWidget.builder(Icons.stars_outlined,"积分",mainAixSpacing: 10.w,labelColor: iconTextWidgetColor,onTap: (){
              Get.toNamed(RoutesConfig.PERSON_STARTS_PAGE);
            },),
            IconTextWidget.builder(Icons.leaderboard_outlined,"排行榜",mainAixSpacing: 10.w,labelColor: iconTextWidgetColor,
              onTap: (){
                Get.toNamed(RoutesConfig.LOGIN_PAGE_BUBBLES);
              },),
            IconTextWidget.builder(Icons.access_time,"浏览历史",mainAixSpacing:10.w,labelColor: iconTextWidgetColor,onTap: (){
              Get.toNamed(RoutesConfig.GIRL_PAGE);
            },),
          ],
        ),
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
